<template>
	<i-drawers v-model="showCar" @change="showCar = false" bodyHeight="920rpx">
		<view class="car_number">
			<view class="car_title">
				<view></view>
				<view>绑定车牌号</view>
				<view class="image" @click="showCar = false">
					<image src="../../static/images/close_gray_icon.png" mode=""></image>
				</view>
			</view>
			<view class="message">客户车牌号为空，建议绑定车牌号</view>
			<car-number-input :shopPop="showCar" @numberInputResult="numberInputResult"
				:defaultStr="defaultNum"></car-number-input>
			<view style="height: 48rpx;"></view>
			<i-buttons color="#fff" bgColor="#FB652E" padding="18rpx 0" radius="4" size="32" @click="submit"
				:disabled="disabled">保存</i-buttons>
		</view>
	</i-drawers>
	<view class="selectCustom">
		<view class="search">
			<i-search @focus="showHistory = true" @blur="showHistory = false" @clear="clear" width="600rpx"
				@change="searchChange" v-model="formData.keyword" margin="none" bgColor="#fff"
				placeholder="车牌号/姓名/手机号查询"></i-search>
		</view>
		<i-historySearch type="historyCustom" @change="historySearchs"
			v-if="showHistory && getStorage('historyCustom')"></i-historySearch>
		<i-scrollList @more="more" height="calc(100vh - 98px)" :total="pageData.total"
			:pageTotal="pageData.list.length">
			<i-clientItem v-for="item in pageData.list" :key="item.userId" :data="item"
				@click="toDetail"></i-clientItem>
			<view v-if="skeleton" v-for="(item,index) in 8" :key="item" style="margin-top: 10px;">
				<i-skeleton iconSize="64rpx" radius="64rpx" :rowsW="['80%', '60%']" :rowsH="['30rpx', '30rpx']"
					size="48rpx" height="154rpx" :rows="2"></i-skeleton>
			</view>
		</i-scrollList>
		<view class="flex_bottom" @click="navTo('/pages/business/addCustom', 'navigateTo')">
			<image src="../../static/images/add@2x.png"></image>
			添加客户
		</view>
	</view>
</template>

<script lang="ts" setup>
	import {
		onLoad,
		onShow
	} from '@dcloudio/uni-app'
	import {
		computed,
		ref,
		reactive
	} from 'vue';
	import useStore from '../../stores/index'
	import { navTo, getStorage, setStorage, showTost } from '../../utils/common';
	import { getStoreCustomerList } from '../../api/store';
	import { customerCreateOrUpdate } from '../../api/business';

	const store = useStore()
	const disabled = ref(true)
	const showHistory = ref(false)
	const skeleton = ref(true)
	const showCar = ref(false)
	const defaultNum = ref('')

	const formData = reactive({
		keyword: '',
		tyjPageNum: 1,
		tyjPageSize: 15,
		// customerType: 1
	})
	const selectData = reactive({
		"id": "",
		"mobile": "",
		"userId": "",
		vno: ''
	})
	const pageData = reactive({
		list: [],
		total: 0
	})

	const searchChange = () => {
		showHistory.value = false
		if (!formData.keyword) {
			return
		}
		const historyCustom = getStorage('historyCustom')
		if (!historyCustom) {
			setStorage('historyCustom', [formData.keyword])
			return
		} else {
			historyCustom.unshift(formData.keyword)
			const set = (new Set(historyCustom))
			setStorage('historyCustom', [...set].slice(0, 20))
		}
		reset()
		getPageData()
	}

	const more = () => {
		formData.tyjPageNum++
		getPageData()
	}
	const clear = () => {
		reset()
		formData.keyword = ''
		getPageData()
	}
	const historySearchs = (e : string) => {
		formData.keyword = e
		reset()
		getPageData()
	}

	const getPageData = async () => {
		const data = await getStoreCustomerList(formData)
		pageData.list = pageData.list.concat(data.rows)
		pageData.total = data.total
		skeleton.value = false
	}

	const reset = () => {
		pageData.list = []
		pageData.total = 0
		formData.tyjPageNum = 1
		skeleton.value = true
	}
	const numberInputResult = (e : string) => {
		defaultNum.value = e
		disabled.value = e.replace(/\s+/g, '').length < 8
	}

	const submit = async () => {
		const carVno = defaultNum.value.replace(/\s+/g, '').replace(/\·/g, '')
		selectData.vno = carVno
		await customerCreateOrUpdate(selectData)
		showTost('更新成功')
		showCar.value = false
		reset()
		getPageData()
	}

	const toDetail = (item : { userName : string, mobile : string, vno : string, userId : string, id : string,customerType: number }) => {
		if (!item.vno) {
			showCar.value = true
			selectData.id = item.id
			selectData.userId = item.userId
			selectData.mobile = item.mobile
			return
		}
		navTo(`/pages/business/goBilling?vno=${item.vno}&userName=${item.userName || ''}&mobile=${item.mobile || ''}&customerType=${item.customerType}`, 'redirectTo')
	}

	onShow(() => {
		reset()
		getPageData()
	})
</script>

<style lang="scss" scoped>
	.selectCustom {
		width: 100%;
		height: 100vh;
		overflow: hidden;
		background-color: #f3f4f5;

		.search {
			width: calc(100% - 64rpx);
			margin: 0 auto;
			@include flexRS;
			height: 44px;
		}
	}

	.car_number {
		height: 920rpx;
		width: calc(100% - 64rpx);
		margin: 0 auto;

		.car_title {
			@include flexRS;

			.image {
				width: 48rpx;
				height: 48rpx;
				margin-bottom: 16rpx;

				image {
					width: 48rpx;
					height: 48rpx;
				}
			}
		}

		.message {
			@include flexRC;
			@include dfont(26rpx);
			padding-bottom: 48rpx;

			color: #A0A0AD;
		}

	}
</style>